<template>
  <!-- 修改密码框 -->
  <el-dialog :visible.sync="visible" :close-on-click-modal="false" :append-to-body="true">
    <el-form ref="dataForm" :rules="rules" :model="dataFrom" label-position="right" label-width="80px" style="width: 500px; margin-left:50px;">
        <el-form-item label="原密码" prop="password">
          <el-input v-model="dataFrom.password" type="password" placeholder="请输入原密码" />
        </el-form-item>
        <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="dataFrom.newPassword" type="password"  placeholder="请输入新密码" />
        </el-form-item>
        <el-form-item label="确认密码" prop="newPassword2">
          <el-input v-model="dataFrom.newPassword2" type="password"  placeholder="请再次输入新密码" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="visible = false">取消</el-button>
        <el-button type="primary" @click="submit">提交</el-button>
      </div>
  </el-dialog>
</template>

<script>
import { updatePassword } from '@/api/user'

export default {
  data() {
    return {
      visible: false,
      dataFrom: {
        password: '',
        newPassword: '',
        newPassword2: '',
      },
      rules: {
        password: [{ required: true, message: '原密码必填', trigger: 'change' }],
        newPassword: [{ required: true, message: '新密码必填', trigger: 'change' }],
        newPassword2: [{ required: true, message: '确认密码必填', trigger: 'change' }],
      }
    }
  },
  methods: {
    init() {
      this.visible = true
      this.$nextTick(() => {
        this.$refs['dataForm'].resetFields()
      })
    },
    submit() {
      this.$refs['dataForm'].validate((valid) => {
        if(valid) {
          updatePassword({
            ...this.dataFrom
          }).then(res => {
            if(res.code == 0) {
              this.$notify({
                message: res.msg,
                type: 'success',
                duration: 2000
              })
              this.visible = false
            }
          })
        }
      })
    },
  }
}
</script>

<style lang="scss" scoped>

</style>

